<template>
<!--    1.如何在v-for 中给form表单绑定动态的v-decorator
        2.如何在v-for 中上传文件并回显文件名-->
    <div class="from-upload-tem">
        <a-row type="flex" justify="space-between">
            <a-col :span="3"></a-col>
            <a-col :span="18" class="content-tem">
                <p class="information-title margin-top-35">任务数据</p>
                <a-form :form="taskForm" @submit="handleSubmit">
                    <div class="task-data-tem">
                        <a-row class="top-th">
                            <a-col :span="7">显示名称</a-col>
                            <a-col :span="7">文件名</a-col>
                            <a-col :span="3">可见范围</a-col>
                            <a-col :span="7" class="have-padding-left">操作</a-col>
                        </a-row>
                        <a-row class="data-tr" v-for="(tdt,index) in taskDetailsList.dataList" :key="tdt.id" :class="{'height-55':index>3}">
                            <a-col :span="7">
                                <a-form-item style="width: 85%;margin-bottom: 5px" class="sample-name" :class="{'canEdit':index>3}" v-if="index>3">
                                    <a-input v-decorator="[
                                                                  `dataList[${index}].name`,
                                                                  {
                                                                      initialValue:tdt.name?tdt.name:'',
                                                                      rules: [{ required: true, message: '请输入样本名称' },{ max: 50,min:1, message: '样本名称不能大于50个字符' }]
                                                                  }
                                                                  ]"
                                             placeholder="请输入样本名称"/>
                                </a-form-item>
                                <template v-else>
                                    {{tdt.name}}
                                    <a-form-item style="height: 0;width: 0">
                                        <a-input type="hidden"
                                                 v-decorator="[
                                                                  `dataList[${index}].name`,
                                                                  { initialValue:tdt.name } ]"/>
                                    </a-form-item>
                                </template>
                                <a-form-item style="height: 0;width: 0">
                                    <a-input type="hidden"
                                             v-decorator="[
                                                                  `dataList[${index}].sort`,
                                                                  { initialValue:index+1 } ]"/>
                                </a-form-item>
                                <a-form-item style="height: 0;width: 0">
                                    <a-input type="hidden"
                                             v-decorator="[
                                                                  `dataList[${index}].type`,
                                                                  { initialValue:tdt.type } ]"/>
                                </a-form-item>
                                <a-form-item style="height: 0;width: 0">
                                    <a-input type="hidden"
                                             v-decorator="[
                                                                  `dataList[${index}].fileId`,
                                                                  { initialValue:tdt.fileId } ]"/>
                                </a-form-item>
                            </a-col>
                            <a-col :span="7">
                                <span :title="tdt.origName">{{tdt.origName}}</span>
                            </a-col>
                            <a-col :span="3" class="select-type-tem">
                                <a-form-item v-if="(2 === tdt.type) || (4 === tdt.type)">
                                    <a-select
                                            v-decorator="[
                                                                  `dataList[${index}].visualRange`,
                                                                  { initialValue:tdt.visualRange } ]" disabled>
                                        <a-select-option :value="1">所有人</a-select-option>
                                        <a-select-option :value="2">仅报名者</a-select-option>
                                        <a-select-option :value="3">仅管理者</a-select-option>
                                    </a-select>
                                </a-form-item>
                                <a-form-item v-else>
                                    <a-select
                                            v-decorator="[
                                                                  `dataList[${index}].visualRange`,
                                                                  { initialValue:tdt.visualRange?tdt.visualRange:1 }]">
                                        <a-select-option :value="1">所有人</a-select-option>
                                        <a-select-option :value="2">仅报名者</a-select-option>
                                        <a-select-option :value="3">仅管理者</a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :span="7" class="have-padding-left">
                                <template v-if="index>3&&tdt.modify==1">
                                    <a-icon type="arrow-up" @click="upFun(index)" v-if="index!=4"/>
                                    <a-icon type="arrow-down" @click="downFun(index)"
                                            v-if="index!=taskDetailsList.dataList.length-1"/>
                                    <a-icon type="close" @click="deleteFun(index)"/>
                                </template>
                                <a-form-item class="have-upload-tem" v-if="tdt.modify==1">
                                    <a-upload
                                            v-if="index==0"
                                            name="file"
                                            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                            :multiple="false"
                                            accept=".yaml,.yml"
                                            :beforeUpload="(file)=>{beforeUpload(file,index)}"
                                            @change="({file,fileList})=>uploadChange(file,fileList,index)"
                                            v-decorator="[
                                                          `dataList[${index}].fileDt`,
                                                          {
                                                          initialValue:tdt.fileId?{'name':tdt.origName}:undefined,
                                                          rules: [{ required: true, message: '请上传文件' }]
                                                          }
                                                        ]">
                                        <a-button type="link" :disabled="disableUpload" @click="uploadIndex = index">
                                            <a-icon type="cloud-upload"/>
                                        </a-button>
                                    </a-upload>
                                    <a-upload
                                            v-if="index!=0"
                                            name="file"
                                            accept=".zip,application/x-zip-compressed"
                                            :multiple="false"
                                            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                            :beforeUpload="(file)=>{beforeUpload(file,index)}"
                                            @change="({file,fileList})=>uploadChange(file,fileList,index)"
                                            v-decorator="[
                                                          `dataList[${index}].fileDt`,
                                                          {
                                                          initialValue:tdt.fileId?{'name':tdt.origName}:undefined,
                                                          rules: [{ required: true, message: '请上传文件' }]
                                                          }
                                                        ]">
                                        <a-button type="link" :disabled="disableUpload" @click="uploadIndex = index">
                                            <a-icon type="cloud-upload"/>
                                        </a-button>
                                    </a-upload>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <span class="add-task-btn txt-center margin-top-20" @click="addTaskFun">
                                            <a-icon type="plus-circle" theme="filled"/>&nbsp;新增
                        </span>
                    </div>
                    <a-row style="margin-top: 20px">
                        <a-col :span="12">
                            <a-form-item label="提交时间 ≥ "
                                         :label-col="{ span: 4 }"
                                         :wrapper-col="{ span: 16 }">
                                <a-date-picker v-if="taskDetailsList.submitDate"
                                               placeholder="请选择时间"
                                               format="YYYY-MM-DD"
                                               v-decorator="[
                                                                      'submitDate',
                                                                      {
                                                                          initialValue:moment(taskDetailsList.submitDate,'YYYY-MM-DD'),
                                                                          rules: [{ required: true, message: '请选择时间' }]
                                                                      }
                                                                      ]" />
                                <a-date-picker v-else
                                               placeholder="请选择时间"
                                               format="YYYY-MM-DD"
                                               v-decorator="['submitDate']" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="5" :offset="8">
                            <a-button type="primary" class="login-form-button btn-width"
                                      :loading="taskLoading" html-type="submit">保存
                            </a-button>
                        </a-col>
                        <a-col :span="5">
                            <a-button class="btn-width go-back-btn" @click="goback">返回</a-button>
                        </a-col>
                    </a-row>
                </a-form>
            </a-col>
            <a-col :span="3"></a-col>
        </a-row>
    </div>
</template>

<script>
    import moment from 'moment';
    export default {
        name: "formAndUpload",
        data(){
            return{
                taskForm: this.$form.createForm(this),
                taskDetailsList: {
                    dataList: [
                        {
                            "id": "1111111111",
                            "fileId": "11111111112",
                            "type": 4,
                            "name": "测试一任务",
                            "visualRange": 3,
                            "modify": 2,
                            "origName": "test-config.yaml"
                        },
                        {
                            "id": "22222222222",
                            "fileId": "222222222223",
                            "type": 2,
                            "name": "测试标签任务",
                            "visualRange": 3,
                            "modify": 2,
                            "origName": "xxxxxx.zip"
                        },
                        {
                            "id": "3333333333333",
                            "fileId": "",
                            "type": 1,
                            "name": "样例数据任务",
                            "visualRange": 1,
                            "modify": 1,
                            "origName": ""
                        },
                        {
                            "id": "4444444444444",
                            "fileId": "44444444444445",
                            "type": 3,
                            "name": "测试样本任务",
                            "visualRange": 1,
                            "modify": 2,
                            "origName": "sample.zip"
                        }],
                    submitDate: '2019-12-30'
                },
                disableUpload: false,
                uploadIndex: null,
                uploadings: [],
                taskLoading: false
            }
        },
        methods:{
            moment,
            //新建任务
            handleSubmit(e){
                e.preventDefault();
                const that = this
                that.taskLoading = true
                this.taskForm.validateFields((err, values) => {
                    if (!err) {
                        this.$store.dispatch("task/taskUpdateAct",values).then((data) => {
                            that.$message.info(data.message)
                            that.taskLoading = false
                            that.taskForm.resetFields()
                        }).catch(() => {
                            that.taskLoading = false
                        })
                    } else {
                        that.taskLoading = false
                    }
                });
            },
            //新增任务数据
            addTaskFun(){
                const obj = {
                    name: '',
                    origName: '无',
                    fileId: '',
                    type: 5,
                    modify: 1
                }
                this.taskDetailsList.dataList.push(obj)
            },
            //上移  新增任务数据
            upFun(index) {
                if (index !== 0) {
                    const obj1 = this.taskForm.getFieldValue(`dataList[${index}]`)
                    const obj2 = this.taskForm.getFieldValue(`dataList[${index - 1}]`)
                    //修改切换排序
                    const s = obj1.sort
                    obj1.sort = obj2.sort
                    obj2.sort = s
                    const fieldItems = {}
                    fieldItems[`dataList[${index}]`] = obj2
                    fieldItems[`dataList[${index- 1}]`] = obj1
                    this.taskForm.setFieldsValue(fieldItems)
                    //修改切换文件名称
                    const origName = this.taskDetailsList.dataList[index].origName;
                    this.taskDetailsList.dataList[index].origName = this.taskDetailsList.dataList[index - 1].origName
                    this.taskDetailsList.dataList[index - 1].origName = origName
                } else {
                    this.$message.info('该数据已不能再上移')
                }
            },
            //下移  新增任务数据0
            downFun(index) {
                if (index != this.taskDetailsList.dataList.length - 1) {
                    const obj1 = this.taskForm.getFieldValue(`dataList[${index}]`)
                    const obj2 = this.taskForm.getFieldValue(`dataList[${index + 1}]`)
                    //修改切换排序
                    const s = obj1.sort
                    obj1.sort = obj2.sort
                    obj2.sort = s
                    const fieldItems = {}
                    fieldItems[`dataList[${index}]`] = obj2
                    fieldItems[`dataList[${index + 1}]`] = obj1
                    this.taskForm.setFieldsValue(fieldItems)
                    //修改切换文件名称
                    const origName = this.taskDetailsList.dataList[index].origName;
                    this.taskDetailsList.dataList[index].origName = this.taskDetailsList.dataList[index + 1].origName
                    this.taskDetailsList.dataList[index + 1].origName = origName
                } else {
                    this.$message.info('该数据已不能再下移')
                }
            },
            //删除  新增任务数据
            deleteFun(index) {
                let i = this.uploadings.indexOf("upload"+index);
                if(i !== -1) {
                    this.$message.warning('文件正在上传不能删除')
                    return;
                }
                this.$delete(this.taskDetailsList.dataList, index)
            },
            beforeUpload(file,index) {
                this.uploadings.push("upload"+index);
                this.disableUpload = true
                let fileend = file.name.substring(file.name.indexOf("."))
                if (this.uploadIndex == 0) {
                    const isYaml = (fileend === '.yaml' || fileend === '.yml')
                    if (!isYaml) {
                        this.disableUpload = false
                        this.$message.error('您只能上传yaml格式的文件!')
                    }
                    return isYaml
                } else {
                    const isZip = (fileend === '.zip' || file.type === 'application/x-zip-compressed')
                    if (!isZip) {
                        this.disableUpload = false
                        this.$message.error('您只能上传zip格式的文件!')
                    }
                    const isLt2G = file.size / 1024 / 1024 / 1024 < 2;
                    if(!isLt2G) {
                        this.disableUpload = false
                        this.$message.error('上传的文件大小必须小于2GB!')
                    }
                    return isZip && isLt2G
                }
            },
            uploadChange(file, fileList,index) {
                if (fileList.length > 1) {
                    fileList.splice(0, 1)
                }
                if (file.status === 'done') {
                    const fileName = file.name
                    let fileId = ''
                    const fieldItems = {}
                    // eslint-disable-next-line no-debugger
                    // debugger;
                    // if (response.code == 200) {
                    //     this.disableUpload = false
                    //     fileId = response.data ? response.data.id : ''
                    //     this.taskDetailsList.dataList[this.uploadIndex].fileId = fileId
                    //     fieldItems[`dataList[${this.uploadIndex}].fileId`] = fileId
                    // }
                    this.disableUpload = false
                    fileId = this.uploadIndex + '22222222'
                    this.taskDetailsList.dataList[this.uploadIndex].fileId = fileId
                    fieldItems[`dataList[${this.uploadIndex}].fileId`] = fileId
                    this.removeItem(index)
                    this.taskForm.setFieldsValue(fieldItems)
                    this.taskDetailsList.dataList[this.uploadIndex].origName = fileName
                } else if (file.status === 'error') {
                    this.removeItem(index)
                    this.disableUpload = false
                    this.$message.error(file.name + 'file upload failed.');
                }
            },
            removeItem(index) {
                let i = this.uploadings.indexOf("upload"+index);
                if(i !== -1) {
                    this.uploadings.splice(i,1)
                }

            },
            goback() {
                this.$router.go(-1)
            },
        }
    }
</script>

<style scoped lang="scss">
    .from-upload-tem{
        .ant-row-flex.ant-row-flex-space-between{
            height: 100%;
            background-color: #e9eaeb;
            .content-tem{
                background-color: #ffffff;
                padding: 20px 80px 0 80px;
                .information-title {
                    text-align: left;
                    font-size: 15px;
                    color: #222222;
                    font-weight: bold;
                    padding-bottom: 10px;
                }
                .task-data-tem {
                    border: 1px solid #d3d3d3;
                    border-radius: 4px;
                    .top-th.ant-row,
                    .data-tr.ant-row {
                        text-align: left;
                        height: 45px;
                        line-height: 45px;
                        padding: 0 25px;
                        .have-padding-left{
                            padding-left: 30px;
                            .have-upload-tem{
                                height: 45px;
                                overflow: hidden;
                            }
                            .ant-row.ant-form-item {
                                display: inline-block;
                            }
                            i{
                                font-size: 16px;
                                color: #12a8a0;
                            }
                            i.anticon.anticon-cloud-upload{
                                font-size: 18px;
                            }
                        }
                        .have-padding-left>i{
                            margin-right: 10px;
                        }
                    }
                    .top-th.ant-row {
                        font-weight: bold;
                        font-size: 15px;
                        color: #222222;
                        border-bottom: 1px solid #d3d3d3;
                    }
                    .data-tr.ant-row{

                    }
                    .add-task-btn {
                        cursor: default;
                        margin: 20px 0 15px 25px;
                        display: inline-block;
                        color: #12a8a0;
                        width: 62px;
                        height: 24px;
                        line-height: 23px;
                        border: 1px solid #12a8a0;
                    }
                    .ant-form-item{
                        line-height: 45px;
                        .ant-form-item-control {
                             line-height: 45px;
                        }
                    }
                    .data-tr.ant-row.height-55 {
                        height: 55px;
                        line-height: 55px;
                        .have-upload-tem{
                            height: 55px;
                        }
                    }
                    .data-tr.ant-row .ant-row.ant-form-item,
                    .submit-limit-tem .ant-row.ant-form-item {
                        margin-bottom: 0;
                    }
                }
                .ant-form-horizontal > .txt-center {
                    padding-top: 20px;
                }
            }
        }
    }
</style>
